<template>
    <div class="hn-base-page-body">
        <div class="header-div">
            <div class="header-logo">
                <span>农产品流通数字化管理服务系统</span>
            </div>
            <div class="right-div fn-clear">
                <i class="close-icon" @click="returnHome"></i>
                <div class="cut-line"></div>
                <p class="user-style">{{ userName }}，您好！</p>
            </div>
        </div>

        <div class="substance-div">
            <div class="menu-div">
                <el-menu router :default-active="defaultActive" class="el-menu-vertical-demo" active-text-color="#3691FF"
                    text-color="#333333" :default-openeds="defaultOpens" @open="handleOpen" @close="handleClose">
                    <el-submenu class="menu-style" :class="[chooseMenuIndex === item.index ? 'choose-menu-style' : '']"
                        v-for="(item, index) in menuList" :key="index" :index="item.index">
                        <template slot="title">
                            <i class="icon-style"></i>
                            <span>{{ item.title }}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(item1, index) in item.menuGropList" :key="index" :index="'/'+item1.url"
                                @click="handleMenu(item1, item)">
                                <template slot="title">
                                    <i class="grop-icon-style"
                                        :class="[chooseMenuGropIndex === item1.index ? 'choose-grop-icon-style' : '']"></i>
                                    <span>{{ item1.title }}</span>
                                </template>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </div>

            <!--路由跳转的页面-->
            <div class="main">
                <h1>111111</h1>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userName: '管理员',
            defaultOpens: ["1", "2", "3"],
            defaultActive: '1-1',
            menuList: [{
                index: '1',
                title: '批发市场基本信息管理',
                menuGropList: [
                    { index: '1-1', title: '基本人事档案', url: 'basicInformation/shopInfo' },
                    { index: '1-2', title: '商铺信息', url: 'goods/index' },
                    { index: '1-3', title: '商铺摊位申请' },
                    { index: '1-4', title: '批发市场数据分析' },
                    { index: '1-5', title: '不合规数据分析' }
                ],
            }, {
                index: '2',
                title: '电商数据管理',
                menuGropList: [
                    { index: '2-1', title: '电商基本信息管理' },
                    { index: '2-2', title: '电商交易数据对接与维护' },
                    { index: '2-3', title: '电商数据分析' },
                    { index: '2-4', title: '不合规数据分析' },
                    { index: '2-5', title: '综合指导价格推送' }
                ],
            }, {
                index: '3',
                title: '品牌数字化管理',
                menuGropList: [
                    { index: '3-1', title: '区域公众品牌' },
                    { index: '3-2', title: '知名企业品牌' }
                ],
            }, {
                index: '4',
                title: '展会数字化管理',
                menuGropList: [{ index: '4-1', title: '展会信息管理' }],
            }, {
                index: '5',
                title: '农产品全程配置管理',
                menuGropList: [
                    { index: '5-1', title: '产品管理' },
                    { index: '5-2', title: '田间档案' },
                    { index: '5-3', title: '企业信息' },
                    { index: '5-4', title: '产地信息' },
                    { index: '5-5', title: '仓储加工' },
                    { index: '5-6', title: '物流信息' },
                    { index: '5-7', title: '公信检测' },
                    { index: '5-8', title: '营养价值' },
                    { index: '5-9', title: '健康食谱' },
                    { index: '5-10', title: '履历档案' },
                    { index: '5-11', title: '全程履历' },
                    { index: '5-12', title: '生产溯源码' },
                    { index: '5-13', title: '履历赋码' }
                ],
            }, {
                index: '6',
                title: '数据大屏',
                menuGropList: [{ index: '6-1', title: '数据大屏' }],
            }, {
                index: '7',
                title: '系统管理',
                menuGropList: [
                    { index: '5-1', title: '用户管理' },
                    { index: '5-2', title: '角色管理' },
                    { index: '5-3', title: '菜单管理' },
                    { index: '5-4', title: '部门管理' },
                    { index: '5-5', title: '岗位管理' }],
            }],
            chooseMenuIndex: '1',
            chooseMenuGropIndex: '1-1',
        }
    },

    mounted() {

    },

    methods: {
        returnHome() {
            this.$router.push({ path: "/main" });
        },
        handleOpen() { },
        handleClose() { },
        handleMenu(menu, pmenu) {
            console.log('handleMenu', menu, pmenu);
            this.chooseMenuGropIndex = menu.index
            this.chooseMenuIndex = pmenu.index
            // this.$router.push({
            //     // name: 'ShopInfo'
            //     path: '/goods/index'
            // })
        }
    }
}
</script>

<style lang="scss" scoped>
.hn-base-page-body {
    width: 100%;
    height: 100vh;

    .header-div {
        width: 100%;
        height: 7.8193%;
        background: url(../assets/images/hnfwglxt/header-bg.png) no-repeat;
        background-size: 100% 100%;
        position: relative;

        .header-logo {
            width: 21.04166666%;
            height: 75.55555%;
            // background: url(../assets/images/hnfwglxt/header-logo1.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            margin-left: 1rem;

            span {
                color: #fff;
                font-size: .7rem;
                font-weight: bold;
            }
        }

        .right-div {
            width: 50%;
            height: .6rem;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0.93798854%;

            .user-style {
                float: right;
                height: 100%;
                font-size: .475rem;
                font-weight: normal;
                color: #ffffff;
                font-family: 'SourceHanSansCN-Normal';
                margin-top: 0;
            }

            .cut-line {
                float: right;
                width: .025rem;
                height: 100%;
                background: #ffffff;
                margin: 0 1% 0 .5%;
            }

            .close-icon {
                float: right;
                width: .575rem;
                height: 100%;
                background: url(../assets/images/hnfwglxt/close-icon.png) no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
        }
    }

    .substance-div {
        width: 100%;
        height: 92.1807%;
        display: flex;
        justify-content: start;

        .menu-div {
            width: 18%;
            height: 100%;
            background: #fff;
            box-shadow: 0 .075rem .125rem 0 rgba(0, 0, 0, 0.50);
            padding: .5% 0 1% 0;
            box-sizing: border-box;
            overflow: auto;

            .menu-style {

                &:nth-child(1) {

                    .icon-style {
                        display: inline-block;
                        width: .475rem;
                        height: .325rem;
                        background: url(../assets/images/hnfwglxt/icon11.png) no-repeat;
                        background-size: 100% 100%;
                        margin-right: 10%;
                        position: relative;
                        top: -.1rem;
                    }
                }

                &:nth-child(2) {

                    .icon-style {
                        display: inline-block;
                        width: .45rem;
                        height: .425rem;
                        background: url(../assets/images/hnfwglxt/icon9.png) no-repeat;
                        background-size: 100% 100%;
                        margin-right: 10%;
                    }
                }

                &:nth-child(3) {

                    .icon-style {
                        display: inline-block;
                        width: .475rem;
                        height: .45rem;
                        background: url(../assets/images/hnfwglxt/icon10.png) no-repeat;
                        background-size: 100% 100%;
                        margin-right: 10%;
                    }
                }

                .grop-icon-style {
                    display: inline-block;
                    width: .375rem;
                    height: .375rem;
                    background: url(../assets/images/hnfwglxt/icon5.png) no-repeat;
                    background-size: 100% 100%;
                    margin-right: 10px;
                }

                .choose-grop-icon-style {
                    background: url(../assets/images/hnfwglxt/icon6.png) no-repeat;
                    background-size: 100% 100%;
                }
            }

            .choose-menu-style {
                width: 100%;
                height: 100%;
                background: url(../assets/images/hnfwglxt/menu-bg.png) no-repeat;
                background-size: 100%;

                /deep/.el-submenu__title {
                    color: #fff !important;
                }

                /deep/.el-submenu__title span {
                    position: relative;
                    top: -.1rem;
                }

                /deep/.el-submenu__title i {
                    color: #fff;
                }
            }

            /deep/.el-submenu__title {
                font-size: .5rem;
                font-weight: 400;
                text-align: left;
                font-family: 'SourceHanSansCN-Normal';
            }

            /deep/.el-submenu .el-menu-item {
                font-size: .45rem;
                font-weight: 700;
                font-family: 'SourceHanSansCN-Normal';
                display: flex;
                align-items: center;
            }

            /deep/.el-menu-item-group__title {
                padding: 0 0 0 20px;
            }

            &::-webkit-scrollbar {
                width: 4px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                opacity: 0.2;
            }

            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                border-radius: 0;
            }
        }

        .content-div {
            width: 86.868161%;
            height: 100%;
            background: #eef3fa;
        }
    }
}</style>